import {IconImg} from '@/components/images'
import {CItem} from '@/components/item'
import CModal from '@/components/modal'
import MyNav from '@/components/nav'
import appStore from '@/store/app'
import {imagesUrl} from '@/utils/baseUrl'
import {getStorage, setStorage} from '@/utils/localstoreage'
import {
  toAboutUs,
  toContactUs,
  toEditCompanyName,
  toEditUserPhone,
  toLogin,
  toSystemNotification,
  toUserInfo,
  toVideoSurveillance
} from '@/utils/pageRedirect'
import {Button, View} from '@tarojs/components'
import Taro from '@tarojs/taro'
import {useDidShow} from '@tarojs/taro'
import {observer} from 'mobx-react'
import {useContext} from 'react'
import {UserItem} from './components'
import {userStore} from './model'

/**分割线 */
const SplitLine = () => (
  <View className="h-1 px-24">
    <View className="h-full bg-border"></View>
  </View>
)

function User() {
  const {visible, changeVisible, pageData, updatePageDataSource} =
    useContext(userStore)
  const {login, userInfo, isLogin} = useContext(appStore)

  const showEditCompanyNameModal = getStorage('showEditCompanyNameModal')

  useDidShow(() => {
    console.log('user useDidShow')
    login({
      cb() {
        updatePageDataSource()
      }
    })

    if (!userInfo.userCompany && isLogin) {
      showEditCompanyNameModal !== 'false' && changeVisible(true)
    }
  })

  return (
    <View
      className="container flex flex-col"
      style={{
        backgroundImage: `url(${imagesUrl + 'user-bg.png'})`,
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat'
      }}
    >
      <MyNav showBack={false}>{userInfo.userCompany}</MyNav>

      <View className="flex-1 overflow-y-auto pb-16">
        <CItem
          posIconStyle={{
            width: '48rpx',
            height: '48rpx'
          }}
          style={{
            height: '180rpx',
            marginBottom: '70rpx',
            padding: '22rpx 48rpx !important',
            justifyContent: 'space-between'
          }}
          onClick={() => toUserInfo()}
        >
          <View className="flex-1 h-full flex items-center">
            <IconImg
              imgName="user-header"
              style={{
                width: '136rpx',
                height: '136rpx'
              }}
            ></IconImg>
            {isLogin ? (
              <View className="ml-14 flex-1 h-full flex flex-col items-center">
                <View className="w-full hanzi mt-8 mb-6 text-20 font-bold truncate">
                  {pageData.user?.userNearName || ''}
                </View>

                <View className="w-full hanzi text-13 truncate">
                  {`当前设备 ${pageData.devCount} 台`}
                </View>
              </View>
            ) : (
              <View
                className="ml-14 flex-1 h-full flex items-center"
                onClick={() => toLogin()}
              >
                <View className="hanzi text-14 truncate">
                  未登录，点击此前往登录
                </View>
              </View>
            )}
          </View>
        </CItem>

        {isLogin ? (
          <>
            <View className="px-16">
              <View className="bg-white rounded-12 overflow-hidden">
                <UserItem
                  icon="user-message"
                  title="系统通知"
                  desc=""
                  onClick={() => {
                    toSystemNotification()
                  }}
                ></UserItem>
                <SplitLine></SplitLine>
                <UserItem
                  icon="user-camera"
                  title="监控摄像"
                  desc=""
                  onClick={() => {
                    toVideoSurveillance()
                  }}
                ></UserItem>
              </View>

              <View className="mt-16 bg-white rounded-12 overflow-hidden">
                <UserItem
                  icon="user-companyName"
                  title="公司名称"
                  desc={pageData.user?.userCompany || '未填写公司名称'}
                  onClick={() => toEditCompanyName()}
                ></UserItem>

                <SplitLine></SplitLine>

                <UserItem
                  icon="user-phone"
                  title="手机号"
                  desc={pageData.user?.userPhone || ''}
                  onClick={() => toEditUserPhone()}
                ></UserItem>
              </View>

              <View className="mt-16 bg-white rounded-12 overflow-hidden shadow-sm">
                <UserItem
                  icon="user-aboutUs"
                  title="关于我们"
                  desc=""
                  onClick={() => toAboutUs()}
                ></UserItem>
                <SplitLine></SplitLine>
                <UserItem
                  icon="user-service"
                  title="联系客服"
                  desc=""
                  onClick={() => toContactUs()}
                ></UserItem>
              </View>
            </View>
            <CModal
              show={visible}
              icon="error"
              changeShow={changeVisible}
              title="为正确使用您的设备"
              content="请输入您的公司名称、以免发生数据记录异常~"
              confirmText="前往设置"
              cancelText="不再提示"
              cancel={() => {
                setStorage('showEditCompanyNameModal', false)
              }}
              confirm={() => {
                toEditCompanyName()
              }}
            ></CModal>
          </>
        ) : null}
      </View>
    </View>
  )
}
export default observer(User)
